<template>
  <view class="parking-packages">
    <view class="search-header">
      <view class="location">
        <text>济南市</text>
      </view>
      <view class="search-box">
        <input
          type="text"
          placeholder="搜索目的地附近车位"
          v-model="searchKeyword"
        />
        <text class="search-btn" @click="getParkingList">搜索</text>
      </view>
    </view>

    <view class="parking-list">
      <view
        class="parking-item"
        v-for="(item, index) in parkingList"
        :key="item.id"
        @click="handleParkingDetail(item.id)"
      >
        <view class="parking-info">
          <image
            class="parking-img"
            :src="item.imagePath || '/static/parking-placeholder.png'"
          ></image>
          <view class="parking-detail">
            <view style="display: flex; justify-content: space-between">
              <text class="parking-name">{{ item.name }}</text>
              <text class="muchNum">{{ item.totalSpaces }}个车位</text>
            </view>
            <text class="parking-address">{{ item.detailedAddress }}</text>
            <view class="parking-tags">
              <text class="tag">距您{{ item.distance.toFixed(1) }}公里</text>
              <text class="tag">{{ item.ratePerHour }}元/小时</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      parkingList: [],
      searchKeyword: "",
    };
  },
  mounted() {
    this.getParkingList();
  },
  methods: {
    getParkingList() {
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      this.$httpReq
        .getParkingList({
          lat: "",
          lon: "",
          name: this.searchKeyword,
          packageType: "",
        })
        .then((res) => {
          this.parkingList = res.data;
          uni.hideLoading();
        });
    },

    handleParkingDetail(id) {
      uni.navigateTo({
        url: `/pages/index/bookParkingPlace/placeDetails?id=${id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.parking-packages {
  min-height: 100vh;
  background: #f7f7f7;
  .search-header {
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 20rpx;

    .location {
      margin-right: 20rpx;
      font-size: 28rpx;
    }

    .search-box {
      flex: 1;
      display: flex;
      align-items: center;
      background: #ffffff;
      border-radius: 30rpx;
      padding: 10rpx 20rpx;
      border: 1rpx solid #3685fa;

      input {
        flex: 1;
        font-size: 26rpx;
      }

      .search-btn {
        color: #4080ff;
        font-size: 26rpx;
      }
    }
  }
  .parking-list {
    padding: 20rpx;
    box-sizing: border-box;
    .parking-item {
      margin-bottom: 30rpx;
      padding: 20rpx;
      background: #ffffff;
      border-radius: 12rpx;

      .parking-info {
        display: flex;
        margin-bottom: 20rpx;

        .parking-img {
          width: 120rpx;
          height: 120rpx;
          margin-right: 20rpx;
          background: #eee;
          border-radius: 8rpx;
        }

        .parking-detail {
          flex: 1;

          .parking-name {
            display: block;
            font-size: 28rpx;
            font-weight: 500;
            margin-bottom: 10rpx;
          }
          .muchNum {
            font-size: 22rpx;
            color: #ffaa00;
          }

          .parking-address {
            display: block;
            font-size: 24rpx;
		
            color: #666;
            margin-bottom: 10rpx;
          }

          .parking-tags {
            .tag {
              display: inline-block;
              font-size: 28rpx;
              color: #FF7D2D;
              background: #FFF4E5;
              padding: 4rpx 12rpx;
              margin-right: 10rpx;
              border-radius: 4rpx;
            }
          }

          .parking-prices {
            .price-item {
              display: flex;
              justify-content: space-between;
              text-align: center;
              font-size: 26rpx;
              color: #666;

              .price {
                display: block;
                color: #f56c6c;
                font-weight: 500;
              }
            }
          }
        }
      }
    }
  }
}
</style>